<template>
  <div class="aui-card--fill scroll-box card-box">
    <div class="pane-shell">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               ref="dataForm"
               @keyup.enter.native="search">
        <el-form-item>
          <el-select v-model="dataForm.patternConsumption"
                     placeholder="消费方式"
                     clearable>
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.patternType"
                     placeholder="消费类型"
                     clearable>
            <el-option v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop='userName'
                      :rules="stringRule(false,1,20)">
          <el-input v-model='dataForm.userName'
                    class='form-item'
                    clearable
                    placeholder='请输入姓名'></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="date"
                          @change="changeDatePicker"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="search">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column type="index"
                         label="序号"
                         header-align="center"
                         align="center"
                         width="50"></el-table-column>
        <el-table-column prop="patternConsumption"
                         label="消费方式"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.patternConsumption === 0">公司钱包</span>
            <span v-if="scope.row.patternConsumption === 1">个人钱包</span>
          </template>
        </el-table-column>
        <el-table-column prop="patternType"
                         label="消费类型"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.patternType === 0">食堂消费</span>
            <span v-if="scope.row.patternType === 1">停车消费</span>
            <span v-if="scope.row.patternType === 2">餐厅消费</span>
            <span v-if="scope.row.patternType === 3">酒店消费</span>
            <span v-if="scope.row.patternType === 4">提现</span>
            <span v-if="scope.row.patternType === 5">提现失败返还</span>
            <span v-if="scope.row.patternType === 6">其他</span>
          </template>
        </el-table-column>
        <el-table-column prop="jobNumber"
                         label="工号"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="userName"
                         label="姓名"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="moneySum"
                         label="金额"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="remark"
                         label="备注"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
      </el-table>

      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
export default {
  mixins: [mixinViewModule, formValidate],
  data () {
    return {
      isDisabled: true,
      mixinViewModuleOptions: {
        getDataListURL: '/tb/patternRecord/getPatternRecord',
        getDataListIsPage: true
      },
      dataList: [],
      options: [
        {
          label: '公司钱包',
          value: 0
        },
        {
          label: '个人钱包',
          value: 1
        }
      ],
      statusOptions: [
        {
          label: '食堂消费',
          value: 0
        },
        {
          label: '停车消费',
          value: 1
        },
        {
          label: '餐厅消费',
          value: 2
        },
        {
          label: '酒店消费',
          value: 3
        },
        {
          label: '提现',
          value: 4
        },
        {
          label: '提现失败返还',
          value: 5
        },
        {
          label: '其他',
          value: 6
        }
      ],
      loading: null,
      date: '',
      dataForm: {
        patternConsumption: '',
        patternType: '',
        userName: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  mounted () {},
  components: {
    tableTemplate
  },
  computed: {},
  methods: {
    /**
     * 时间格式转换
     */
    timeFormate (timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      return year + '-' + month + '-' + date
    },
    changeDatePicker (val) {
      if (val) {
        this.dataForm.startTime = this.timeFormate(val[0])
        this.dataForm.endTime = this.timeFormate(val[1])
      } else {
        this.dataForm.startTime = ''
        this.dataForm.endTime = ''
      }
    },
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
